<ion-header>
    <head-nav [title]="'Transaction'"></head-nav>
  </ion-header>
  
  
  <ion-content padding>
    <div *ngIf="loading">
      <ion-spinner name="crescent"></ion-spinner>
    </div>
  
    <div *ngIf="!loading" class="page-content">
      <h1> 
        <span [hidden]=" txIndex !== null && txDirection !== '<' ">Input</span>
        <span [hidden]=" txIndex !== null && txDirection !== '>' ">Output</span>
        Transaction | Index #{{ txIndex }}
      </h1>
      <p class="item-hash">
        <b>Transaction Hash</b> {{ tx.txid }}
      </p>
      <br><br>
      <h2>Summary</h2>
  
      <ion-list class="list--summary">
        <ion-item>
          Size
          <ion-note item-end>
            {{ tx.size }} (bytes)
          </ion-note>
        </ion-item>
        <ion-item>
          Fee Rate
          <ion-note item-end>
            {{ (tx.fees / tx.size) * 1E8 | number:'1.0-8' }} sats/byte
          </ion-note>
        </ion-item>
        <ion-item>
          Received Time
          <ion-note item-end>
            {{ tx.time * 1000 | date:'medium' }}
          </ion-note>
        </ion-item>
        <ion-item>
          Mined Time
          <ion-note item-end>
            {{ tx.blocktime * 1000 | date:'medium' }}
          </ion-note>
        </ion-item>
        <ion-item>
          Included in Block
          <ion-note item-end>
            <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
          </ion-note>
        </ion-item>
      </ion-list>
      <br>
      <h2>Details</h2>
  
      <transaction [tx]="tx" [txIndex]="txIndex" [txDirection]="txDirection"></transaction>
    </div>
  
  </ion-content>
  